let path = require("path");
let webpack = require("webpack");
let HtmlWebpackPlugin = require("html-webpack-plugin");
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");

// Module Federation的动机是为了不同开发小组间共同开发一个或者多个应用
// 应用将被划分为更小的应用块，一个应用块，可以是比如头部导航或者侧边栏的前端组件，也可以是数据获取逻辑的逻辑组件
// 每个应用块由不同的组开发
// 应用或应用块共享其他其他应用块或者库

// 使用Module Federation时，每个应用块都是一个独立的构建，这些构建都将编译为容器
// 容器可以被其他应用或者其他容器应用
// 一个被引用的容器被称为remote, 引用者被称为host，remote暴露模块给host, host则可以使用这些暴露的模块，这些模块被成为remote模块


module.exports = {
    mode: "development",
    entry: "./src/index.js",
    output: {
        publicPath: "http://localhost:3000/",
        // filename:'[name].js'
    }, 
    devServer: {
        port: 3000,
        
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ["@babel/preset-react"]
                    },
                },
                exclude: /node_modules/,
            },
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),
        // 模块联邦就是微前端的一种实现方式
        new ModuleFederationPlugin({
            filename: 'remoteEntry.js', //构建输出的文件名
            name: "remoteVariable", //必传值，即输出的模块名，被远程引用时路径为${name}/${expose}
            exposes: { //被远程引用时可暴露的资源路径及其别名
                "./NewsList": "./src/NewsList",
            },
            remotes: { //远程引用的应用名及其别名的映射，使用时以key值作为name
                remote: "hostVariable@http://localhost:8000/remoteEntry.js"
            },
            shared: { //与其他应用之间可以共享的第三方依赖，使你的代码中不用重复加载同一份依赖
                react: { singleton: true },
                'react-dom': { singleton: true }
            }
        })
    ]
}